<template>
  <div class="car-type-card base-padding">
    <div class="user__car_title">
      {{ carType.carTypeName }}
    </div>
    <div class="user__car_list">
      <div class="dot" style="background: #46a1bb"></div>
      <small style="color: #46a1bb">[当前]</small>
      <p v-if="params.startAddress">
        {{ params.startAddress.address }}
      </p>
    </div>
    <div class="user__car_list">
      <div class="dot" style="background: #ff9800"></div>
      <p v-if="params.endAddress">
        {{ params.endAddress.address }}
      </p>
    </div>
    <div class="user__car_list">
      <icon type="ion ion-clock" size="1.5"/>
      <p class="">{{ handleCarUseTime }}</p>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        params: {},
        carType: {}
      }
    },
    mounted () {
      this.params = store.get('USER_CAR_PARAMS');
      this.carType = store.get('USER_CAR_TYPE_DATA');
    },
    computed: {
      handleCarUseTime () {
        return moment(this.params.carUserTime).format('YYYY-MM-DD hh:mm')
      }
    }
  }
</script>

<style lang="stylus" type="text/stylus" scoped>
  @import "~assets/css/theme"

  .car-type-card
    padding-top 1 * .61rem
    padding-bottom 1 * .61rem
    background #fff
    .user__car_title
      display flex
      justify-content space-between
      align-items center
      font-size $sl_font_size_16
    .user__car_list
      display flex
      align-items center
      box-sizing border-box
      >span
        width 2 * .61rem
        text-align left
      .dot
        width 1 * .61rem
        height: 1 * .61rem
        border-radius 50%
        margin-right 1 * .61rem
      .icon
        color: $sl_font_color_desc
      >small
        margin-right .8 * .61rem
        font-size $sl_font_size_small
      >p
        color $sl_font_color_default
        font-size $sl_font_size_small
    >div
      height 2.5 * .61rem
</style>
